<template>
    <section>
        <DetailsHeader title="管理发票信息" class="mb-24">
            <div style="margin-left: auto;">
                <span class="col-8A93A7 fz-12 mr-16">最多可创建10条地址信息</span>
                <a-button type="primary" class="card-opt" @click="handleAdd" :disabled="tableList.length > 10">新增</a-button>
            </div>
        </DetailsHeader>

        <div class="page-content">
            <a-table :dataSource="tableList">
                <a-table-column key="recipient" title="收件人姓名" data-index="recipient" />
                <a-table-column key="phone" title="电话" data-index="phone" />
                <a-table-column key="creatTime" title="地址" data-index="voucher_amount">
                    <template #default="{ record }">
                        {{ record.region }} {{ record.address }}
                    </template>
                </a-table-column>

                <a-table-column key="action" title="操作">
                    <template #default="{ record }">
                        <a-button type="link" @click="handleEdit(record)" style="padding-left:0;">编辑</a-button>
                        <a-button type="link" @click="handleDel(record.id)">删除</a-button>
                    </template>
                </a-table-column>
            </a-table>
        </div>

        <!-- 新增发票地址 -->
        <a-modal v-model:visible="modalVisible" title="新增地址" @ok="handleOk" @cancel="handleCancel">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="recipient" label="收件人姓名" :rules="[{ required: true, message: '请填写收件人姓名' }]">
                    <a-input placeholder="请填写收件人姓名" v-model:value="form.recipient"></a-input>
                </a-form-item>
                <a-form-item name="area" label="选择地区" :rules="[{ required: true, message: '请填写收件人地区' }]">
                    <a-cascader v-model:value="form.area" :options="areaList"
                        :field-names="{ label: 'name', value: 'name' }" placeholder="请选择地区" />
                </a-form-item>
                <a-form-item name="address" label="详细地址" :rules="[{ required: true, message: '请填写详细地址' }]">
                    <a-input placeholder="请填写详细地址" v-model:value="form.address"></a-input>
                </a-form-item>
                <a-form-item name="phone" label="联系电话" :rules="[{ required: true, message: '请填写您公司的有效联系电话' }]">
                    <a-input placeholder="请填写您公司的有效联系电话" v-model:value="form.phone"></a-input>
                </a-form-item>
                <a-checkbox v-model:checked="form.default">设为默认地址</a-checkbox>
            </a-form>
        </a-modal>
    </section>
</template>
<script setup>
import { ref } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { getInvoiceAddressListApi, addInvoiceAddressListApi, delInvoiceAddressListApi } from 'api/modules/api.cost'
import { areaList } from '@/assets/js/area.js'
import { XsyMessage } from '@/libs/util.toast'

const tableList = ref([])
// 更改地址
const form = ref({})
const modalVisible = ref(false)
const handleAdd = () => {
    modalVisible.value = true
}

const formRef = ref();

const handleOk = () => {
    const params = {
        ...form.value,
        province: form.value.area[0] || '',
        city: form.value.area[1] || '',
        district: form.value.area[2] || '',
    }
    addInvoiceAddressListApi(params).then((res) => {
        if (res.code == 0) {
            XsyMessage.success('操作成功');
            modalVisible.value = false
            getList()
            formRef.value.resetFields();
        }
    })
}
// 点击取消重置表单
const handleCancel = () => {
    formRef.value.resetFields();
}

const queryParams = ref({
    pn: 1,
    ps: 10
})

const getList = () => {
    getInvoiceAddressListApi(queryParams.value).then(res => {
        if (res.code == 0) {
            tableList.value = res.data.list || []
        }
    })
};

getList()

// 编辑
const handleEdit = (record) => {
    modalVisible.value = true
    form.value = {
        ...record,
        area: (record.region).split('-')
    }
}

// 删除
const handleDel = (id) => {
    delInvoiceAddressListApi(id).then(res => {
        if (res.code == 0) {
            XsyMessage.success('删除成功');
            getList()
        }

    })
}

</script>